<template>
  <header>
    <div class="l-content">
      <!-- 收缩图标 -->
      <i v-if="!isCollapse" class="el-icon-s-fold" @click="asideMenu"></i>
      <!-- 扩张图标 -->
      <i v-else class="el-icon-s-unfold" @click="asideMenu"></i>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="item in menuList" :key="item.id" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img class="user" :src="UserImg.length==0 ? defaultUserImg : UserImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="toUserInfo">个人中心</span>
          </el-dropdown-item>

          <el-dropdown-item>
            <span @click="loginOut">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import UserApi from '@/api/user/UserApi';
import {mapState} from 'vuex'
import { Message } from 'element-ui';
export default {
  name: "BackHeader",
  data() {
    return {
      // defaultUserImg: 'https://img0.baidu.com/it/u=2933144277,475331862&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
      // UserImg: '',
    };
  },
  // created(){
  //   // 页面渲染时查询用户信息，渲染用户头像，如果没有头像用默认头像
  //   UserApi.UserInfo().then(res => {
  //     this.UserImg=res.data.data.avatar;
      
  //   })
  // },
  computed: {
    // 用来变换收缩图标
    isCollapse() {
      // 用的是vux的模块化引用调用 state的数据
      return this.$store.state.AsideCollapse.isCollapse;
    },
    ...mapState({
      // 获取vuex的menu数组
      menuList: state => state.BreadCrumbs.menuList,
      // 获取vuex的默认头像地址
      defaultUserImg: state => state.UserInfo.defaultUserImg,
      // 获取vuex的头像地址
      UserImg: state => state.UserInfo.userImg,
    }),
  },
  // watch: {
  //   'this.$store.state.UserInfo.userImg':function(old,year){
  //     console.log(year)
  //     userImg=year;
  //   }
  // },
  methods: {
    asideMenu() {
      // console.log(this.$store);
      // 模块化的调用方式之一
      this.$store.commit("AsideCollapse/CollapseMenu");
    },
    toUserInfo(){
      // 跳转去个人信息页面
      this.$router.push({path: "/backHome/userInfo/"});
      // 使用vuex调用方法传入当前menu的数据到state
      this.$store.commit('BreadCrumbs/SelectMenu',{
                id: '99',
                path: "/backHome/userInfo/",
                name: "UserProfile",
                label: "个人中心",
            });
    },
    loginOut(){
      // 获取存到浏览器的用户名和密码
      const name=localStorage.getItem("userName");
      const id=localStorage.getItem("userId");
      UserApi.LoginOut(name, id).then( res => {
        // 用户退出提示信息
        this.$message.success(res.data.message);
        //清除存在浏览器上的信息
        localStorage.clear();
        // 跳转登录页面
        this.$router.push({name: 'Login'})
        //清除vuex中的menu数据, 防止登录进去显示上次的面包屑
        this.$store.commit("BreadCrumbs/ClearMenu")
      })
    },
  },
};
</script>

<style scoped>
/* 子绝父相 定位模式 */
.l-content {
  /* 宽度是为了展示面包屑的 */
  width: 67%;
  /* background-color: pink; */
  position: absolute;
  top: 16px;
  left: 16px;
}
.l-content h3 {
  position: absolute;
  top: -3px;
  left: 31px;
  /* 经过有小手 */
  cursor: pointer;
}
.r-content {
  /* background-color: pink; */
  position: absolute;
  top: 10px;
  right: 16px;
}
.user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 经过有小手 */
  cursor: pointer;
}
.el-breadcrumb {
  /* 面包屑的样式 */
  font-size: 14px;
  position: absolute;
  left: 22px;
  top: 4px;
  width: auto;
}
</style>